<template>
  <div style="display: flex; width:600px">
    <el-select placeholder="请选择省份" v-model="province" clearable>
      <el-option
          v-for="item in areas"
          :key="item.code"
          :value="item.code"
          :label="item.name"
      >
      </el-option>
    </el-select>
    <el-select  clearable :disabled="!province" placeholder="请选择城市" style="margin: 0 10px;" v-model="city">
      <el-option
          v-for="item in selectCity"
          :key="item.code"
          :value="item.code"
          :label="item.name"
      >
      </el-option>
    </el-select>
    <el-select clearable placeholder="请选择区域" v-model="area" :disabled="!province||!city">
      <el-option
          v-for="item in selectArea"
          :key="item.code"
          :value="item.code"
          :label="item.name"
      >
      </el-option>
    </el-select>
    <el-select clearable placeholder="请选择街道" v-model="street" :disabled="!province||!city||!area">
      <el-option
          v-for="item in selectStreet"
          :key="item.code"
          :value="item.code"
          :label="item.name"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script setup lang="ts">
import {ref,watch} from 'vue'
import allAreas from './lib/pcas-code.json'
export interface AreaItem {
  name: string,
  code: string,
  children?: AreaItem[]
}

export interface Data {
  name: string,
  code: string
}
let province = ref<string>('')
let city = ref<string>('')
let area = ref<string>('')
let street = ref<string>('')
// 所有的省市区数据
let areas = ref(allAreas)
let selectCity = ref<AreaItem[]>([])

watch(()=>province.value,value => {
  if(value){
    selectCity.value =  areas.value!.find(item=>item.code === province.value)!.children!;
  }
  city.value = ''
  area.value = ''
  street.value = ''
})

let selectArea =ref<AreaItem[]>([])
watch(()=>city.value,value => {
  if(value){
    selectArea.value =  selectCity.value!.find(item=>item.code === city.value)!.children!;
  }
  area.value = ''
  street.value = ''
})

let selectStreet = ref<AreaItem[]>([])
watch(()=>area.value,value => {
  if(value){
    selectStreet.value =  selectArea.value!.find(item=>item.code === area.value)!.children!;
  }
  street.value = ''
})

let emits = defineEmits(['change'])

watch(()=>street.value,val=>{
  if(val){
    let provinceData: Data = {
      code: province.value,
      name: province.value && allAreas.find(item => item.code === province.value)!.name
    }
    let cityData: Data = {
      code: city.value,
      name: city.value && selectCity.value.find(item => item.code === city.value)!.name
    }
    let areaData: Data = {
      code: area.value,
      name: area.value && selectArea.value.find(item => item.code === area.value)!.name
    }
    let streetData: Data = {
      code: val,
      name: val && selectStreet.value.find(item => item.code === val)!.name
    }
    emits('change', {
      province: provinceData,
      city: cityData,
      area: areaData,
      street: streetData,
    })
  }
})
</script>

<style lang="scss" scoped>

</style>
